.sk-circle {
  width: 40px;
  height: 40px;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    &:before {
      content: '';
      display: block;
      margin: 0 auto;
      width: 15%;
      height: 15%;
      background-color: $white;
      border-radius: 100%;
      animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    }
  }
  @for $i from 2 through 12 {
    .sk-circle#{$i} {
      transform: rotate(#{($i - 1) * 30}deg);
      &:before {
        animation-delay: -#{1.1 - ($i - 2) * 0.1}s;
      }
    }
  }
}

@keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}